<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <div class="list">
      <div class="item">11</div>
      <div class="item">22</div>
      <div class="item">33</div>
      <div class="item">44</div>
      <div class="item">55</div>
      <div class="item">66</div>
    </div>
  </div>
  <script>
    // document.getElementById
    // document.getElementsByClassName
    // document.getElementsByName
    // document.getElementsByTagName
    // document.getElementsByTagNameNS
    // const appDom = document.getElementById('app');
    // 图片表示dom关系
    // console.log(appDom.childNodes)
    // console.log(Array.prototype.slice.call(appDom.childNodes))
    // console.log(Array.from(appDom.childNodes))
    // const firstChild = appDom.firstChild;
    // const lastChild = appDom.lastChild;
    // console.log(firstChild);
    // console.log(firstChild.parentNode);
    // console.log(firstChild.previousSibling);
    // console.log(firstChild.nextSibling)
    // console.log(firstChild.nextSibling.previousSibling)

    // 操纵节点
    // 把一个节点移动到另一个位置，则这个节点也消失
    const listDom = document.getElementsByClassName("list")[0];
    // listDom.appendChild(listDom.firstChild.nextSibling) 
    
    // 插入指定位置
    // const addD = document.createElement('div');
    // addD.innerHTML = 77;
    // listDom.insertBefore(addD, null) // null 则插入到最后
    // listDom.insertBefore(addD, listDom.firstChild) // 插入到一个dom的前面
    // listDom.insertBefore(addD, listDom.firstChild.nextSibling)// 插入到一个dom的后面


    // 替换某个节点，第一个参数替换第二个参数，第二个消失
    // const addD = document.createElement('div');
    // addD.innerHTML = 77;
    // listDom.replaceChild(addD, listDom.firstChild.nextSibling)

    // // 删除一个节点
    // listDom.removeChild(listDom.lastChild.previousSibling)


    // 克隆cloneNode
    // 克隆之后是游离的孤儿节点，可以appendChild到其他节点
    const deepCloneNode = listDom.cloneNode(true);
    console.log(deepCloneNode);
    const shallowCloneNode = listDom.cloneNode(false);
    console.log(shallowCloneNode)
    listDom.appendChild(deepCloneNode)
  </script>
</body>

</html>